<template>
    <div>
        <mt-navbar v-model="selected">
            <mt-tab-item id="1">我的信息</mt-tab-item>
            <mt-tab-item id="2">我的订单</mt-tab-item>
        </mt-navbar>
        <!-- tab-container -->
        <mt-tab-container v-model="selected">
            <mt-tab-container-item id="2">
               <el-card v-for="order in orderList" :key="order.id">
                   <div style="width: 100%;">
                       <span style="font-weight: 600;color: #999;">车位号:{{order.carPlaceId}}</span>
                       <el-button icon="el-icon-delete" style="float: right;margin-top: -12px;font-size: 19px;margin-left: 5px;color: red;" type="text" @click="deleteOrder(order.id)"></el-button>
                       <div style="float: right;font-weight: 600;color: cornflowerblue">{{order.orderStatus | StatusFilter}}</div>
                   </div>
                   <div style="width: 100%;">
                       <span style="font-weight: 600">收费:{{order.ruleCode}}</span>
                   </div>
                   <div style="width: 100%;">
                       <span style="font-weight: 600">{{order.plateNum}}</span>
                   </div>
                   <div style="width: 100%">
                       <span style="font-size: 10px">开始时间:{{order.startTime | DateFilter}}</span>
                       <span style="font-size: 10px;float: right">￥{{order.actualPay}}</span>
                   </div>
                   <div style="width: 100%">
                       <span style="font-size: 10px">结束时间:{{order.endTime | DateFilter}}</span>
                       <span style="font-size: 10px;float: right">{{order.payStatus | StatusFilter}}</span>
                   </div>
                   <div style="width: 100%">
                       <el-button v-if="order.orderStatus === 14 && order.payStatus === 15" style="width: 71px;height: 18px;float: right;font-size: 11px;line-height: 5px;" size="small" type="danger"  @click="payCar(order)">支付</el-button>
                       <el-button v-if="order.orderStatus === 13" style="width: 71px;height: 18px;float: right;font-size: 11px;line-height: 5px;" size="small" type="success"  @click="takeCar(order)">取车</el-button>
                       <el-button v-if="order.orderStatus === 11" style="width: 71px;height: 18px;float: right;font-size: 11px;line-height: 5px;" type="primary" size="small"  @click="stopCar(order)">停车</el-button>
                   </div>
               </el-card>
            </mt-tab-container-item>
            <mt-tab-container-item id="1">
                <div style="display: flex;flex-direction:column;align-items: center;justify-content: center;width: 100%;height: 150px;background-color: #1a61aa8a">
                    <img :src="domain+user.photo" style="width: 80px;height: 80px;border-radius: 50%">
                    <el-rate
                            v-model="user.credit"
                            :max="10"
                            show-score
                            disabled
                            allow-half
                            score-template="{value}"
                            show-text
                            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                    >
                    </el-rate>
                    <h3>{{user.userName}}</h3>

                </div>
                <div>
                    <mt-field label="账户名称" disabled v-model="user.account"></mt-field>
                    <mt-field label="账户余额" disabled v-model="user.balance">元&nbsp;&nbsp;<el-button size="small" type="primary" @click="addMoney">充值</el-button></mt-field>
                    <mt-field label="电话" v-model="user.phone"></mt-field>
                    <mt-field label="Email" v-model="user.email"></mt-field>
                    <mt-field label="家庭住址" type="textarea" v-model="user.location" ></mt-field>
                    <div style="display: flex;flex-direction:column;align-items: center;justify-content: center;width: 100%;height: 80px">
                        <el-button circle type="primary" style="width: 60px;height: 60px;margin-top: 10px" @click="saveUser">
                            <i style="font-size: 21px" class="el-icon-download"></i> <br>
                            <span>保存</span>
                        </el-button>
                    </div>
                </div>

            </mt-tab-container-item>
        </mt-tab-container>
        <el-dialog  title="订单信息"
                    :visible.sync="popupVisible"
                    width="80%"
                    :before-close="handleClose">
            <mt-field style="font-size: 18px" label="订单号" >{{orderForm.orderNum}}</mt-field>
            <mt-field style="font-size: 18px" label="车位编号" >{{orderForm.carPlaceId}}</mt-field>
            <mt-field style="font-size: 18px" label="车牌号" >{{orderForm.plateNum}}</mt-field>
            <mt-field style="font-size: 18px" label="开始时间">{{orderForm.startTime | DateFilter}}</mt-field>
            <mt-field style="font-size: 18px" label="结束时间">{{orderForm.endTime | DateFilter}}</mt-field>
            <mt-field style="font-size: 18px" label="停车时长">{{orderForm.parkingTime}}小时</mt-field>
            <mt-field style="font-size: 18px" label="收费规则">{{orderForm.ruleCode}}</mt-field>
            <mt-field style="font-size: 18px" label="总金额"><span style="text-decoration:line-through;color: red"> {{orderForm.totalPay}}元 </span> {{orderForm.actualPay}} 元</mt-field>
            <div slot="footer">
                <mt-button size="small" @click="submitOrder">确认</mt-button>
                <mt-button style="margin-left: 10px" size="small"  @click="handleClose">取消</mt-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { MessageBox,Toast } from 'mint-ui';
    import Filter from '../../utils/filter.js'
    import Config from '../../config'
    export default {
        name: "center",
        data(){
            return{
                selected:"1",
                orderList:[],
                popupVisible:false,
                orderInfo:{},
                user:JSON.parse(localStorage.getItem("user")),
                orderForm:{},
                domain:Config.domain
            }
        },
        methods:{
            getOrders(){
                this.$http.get("/parkingOrder/getCurrentOrder").then(res=>{
                    if (res.status===200){
                        this.orderList = res.data;
                    }
                })
            },
            deleteOrder(data){
                MessageBox.confirm('确定删除此通知?').then(() => {
                    this.$http.get("/parkingOrder/delete/"+data).then(res=>{
                        if (res.status===200){
                            Toast({
                                message: '删除成功',
                                iconClass: 'el-icon-check'
                            });
                            this.getOrders();
                        }
                    })
                });
            },
            handleClose(){
                this.popupVisible = false;
            },
            stopCar(data){
                MessageBox.confirm("确认停车吗?停车时间将从预约开始计算").then(()=>{
                    this.$http.get("/parkingOrder/changeOrderStatus",{params:{"orderNum":data.orderNum,"orderStatus":"停车中","payStatus":"待支付","parkingOrderId":data.id}}).then(res=>{
                        if (res.status===200){
                            Toast({
                                message: '停车成功',
                                iconClass: 'el-icon-check'
                            });
                            this.getOrders();
                        }
                    })
                })
            },
            takeCar(data){
                MessageBox.confirm("当前时间:"+new Date().getHours()+":"+new Date().getMinutes()+",确认取车吗？").then(()=>{
                    this.$http.post("/parkingOrder/takeCarOrder",data).then(res => {
                        if (res.status===200){
                            Toast({
                                message: '取车成功,停车时间:'+res.data.parkingTime+"小时,消费金额:"+res.data.totalPay+",请尽快支付，欢迎下次光临！",
                                iconClass: 'el-icon-check'
                            });
                            this.getOrders();
                        }
                    })
                })
            },
            payCar(data){
                this.popupVisible = true;
                this.orderForm = data;
            },
            saveUser(){
                this.$http.post("/user/update",this.user).then(res=>{
                    if (res.status === 200){
                        Toast({
                            message: '更新成功',
                            iconClass: 'el-icon-check'
                        });
                        localStorage.setItem("user",JSON.stringify(this.user));
                    }
                })
            },
            addMoney(){
                MessageBox.prompt('请输需要充值的金额(元)', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(({ value }) => {
                    if (value<0){
                        Toast({
                            message: '请输入正确金额',
                            iconClass: 'el-icon-close'
                        });
                    } else {
                        Toast({
                            message: '你的充值金额为:'+value+'元',
                            iconClass: 'el-icon-check'
                        });
                        this.user.balance = Number.parseInt(this.user.balance) + Number.parseInt(value);
                        this.saveUser();
                    }
                }).catch(() => {
                    Toast({
                        message: '取消输入',
                        iconClass: 'el-icon-close'
                    });
                });
            },
            submitOrder(){
                this.$http.post("/parkingOrder/payOrder",this.orderForm).then(res=>{
                    if (res.status===200){
                        if (res.data.code === "1"){
                            this.popupVisible = false;
                            Toast({
                                message: res.data.message,
                                iconClass: 'el-icon-close'
                            });
                        } else {
                            Toast({
                                message: res.data.message,
                                iconClass: 'el-icon-check'
                            });
                            this.popupVisible = false;
                            this.getOrders()
                        }
                    }
                })
            },
            getUser(){
                let user = JSON.parse(localStorage.getItem("user"));
                this.$http.get("user/getUserInfo?id="+user.id).then(res=>{
                    if (res.status === 200){
                        this.user = res.data;
                    }
                })
            }
        },
        mounted(){
            this.getOrders();
            this.getUser();
        },
        filters:{
            StatusFilter:function (data) {
                return Filter.CodeFilter(data);
            },
            DateFilter:function (data) {
                return Filter.DateFilter(data)
            },
            /**
             * @return {string}
             */
             ParkingFilter:async function (data) {
                return await Filter.ParkingFilter(data);
            }
        }
    }
</script>

<style scoped>

</style>